<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>准备</title>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            color: #555555;
            animation-duration: 1s;
        }

        .turnTi {
            -webkit-text-size-adjust: none;
            word-wrap: break-word;
            line-height: 30px;
            letter-spacing: 2px;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .detail {
            padding: 40px;
            min-height: 300px;
            height: fit-content;
            font-size: 24px;
            letter-spacing: 3px;
            line-height: 30px;
            display: flex;
            text-align: center;
        }

        .choice {
            width: 710px;
        }

        .judgeList {
            width: 440px;
        }

        .present {
            width: 320px;
        }

        .listHeader {
            -webkit-text-size-adjust: none;
            word-wrap: break-word;
            line-height: 30px;
            letter-spacing: 2px;
            font-size: 23px;
            margin-bottom: 20px;
        }

        .list {
            font-size: 22px;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }

        .slide-fade-enter-active {
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-leave-active {
            transition: all .3s ease;
        }

        .slide-fade-enter, .slide-fade-leave-to {
            transform: translateY(-20px);
            opacity: 0;
        }
    </style>

</head>
<body>

<template id="turn">
    <div class="xTurn">
        <div style="width: 1200px;height: 30px; text-align: left; margin: auto">
            <span class="centerText turnTi" v-if="!$attrs.last">第{{order + 1}}轮</span>
            <span class="centerText turnTi" v-if="$attrs.last">当前结果</span>
        </div>
        <div class="detail">
            <div class="choice">
                <div class="listHeader">
                    选手
                </div>
                <div class="list">
                    <!--suppress JSUnresolvedVariable -->
                    <div v-for="(item) in $attrs.choice">
                        {{item.detail}}
                    </div>
                </div>
            </div>
            <div class="judgeList">
                <div class="listHeader">
                    得票
                </div>
                <div class="list">
                    <div v-for="(item) in $attrs.choice">
                        {{item.score}}
                    </div>
                </div>
            </div>
            <div class="present">
                <div class="listHeader">
                    裁判
                </div>
                <div class="list">
                    <div v-for="(item) in $attrs.judge">
                        {{item}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<div id="app">
    <div style="display: flex;">
        <div style="width: 20%;min-height: 40px;"></div>
        <header :class="{xHeader:true}" id="head" style="width: 60%;">
            {{head}}
        </header>
        <div style="width: 20%; min-height: 40px; margin: auto;">
            <div class="xButton" @click="nextTurn" @mouseenter="menter" @mouseleave="mleave">
                <div class="centerText">继续投票</div>
            </div>
        </div>
    </div>

    <transition name="slide-fade">
        <div v-show="next">
            <div style="margin-bottom: 80px;">
                <form class="xForm">
                    <div>
                        <label class="xInputTittle">下一轮裁判</label>
                        <div style="display: flex;">
                            <div style="width: fit-content;" v-for="(j) in list[list.length-1].judge">
                                <label>
                                    <input :value="j" class="xCheckBox" type="checkbox" v-model="checkedJudge"/>
                                </label>
                                <span style="text-align: center;line-height: 100%;font-size: 20px;">{{j}}</span>
                            </div>
                        </div>
                        <p class="xPrompt">下一轮的裁判</p>
                    </div>
                    <div>
                        <label class="xInputTittle">晋级名额</label>
                        <label for="limit"></label><input class="xInput" id="limit" type="number" v-model="judgeLimit">
                        <p class="xPrompt">新一轮的晋级名额</p>
                        <div class="clapboard"></div>
                    </div>
                    <div>
                        <label class="xInputTittle">选择名额</label>
                        <label for="option"></label><input class="xInput" id="option" type="number" v-model="judgeOption" value=1>
                        <p class="xPrompt">每一个裁判的选择名额</p>
                        <div class="clapboard"></div>
                    </div>
                    <div @click="start" @mouseenter="menter" @mouseleave="mleave" class="xButton xLongButton">
                        <div class="centerText">立即开始>></div>
                    </div>
                </form>
            </div>
        </div>
    </transition>

    <div id="turns" v-for="(i) in list">
        <!--suppress JSUnresolvedVariable -->
        <turn :choice="i.choices" :judge="i.judge" :order="i.order" :last="i.order===list.length-1"></turn>
    </div>
    <div style="width: 61.8%; margin: auto">
        <div @click="edit(urls.del)" class="xButton xLongButton" style="margin: 18px" @mouseenter="menter" @mouseleave="mleave">
            <div class="centerText">删除投票>></div>
        </div>
        <div @click="edit(urls.reset)" class="xButton xLongButton" style="margin: 18px" @mouseenter="menter" @mouseleave="mleave">
            <div class="centerText">重置投票>></div>
        </div>
    </div>
</div>

<script type="application/javascript">
    // noinspection JSAnnotator
    const a = new Vue({
        el: "#app",
        data: {
            turnId: -1,
            list: [],
            ballot: "",
            showCheckbox: false,
            judgeLimit: 1,
            judgeOption: 1,
            head: "",
            next:false,
            checkedJudge: [],
            axGet:{},
            axPost:{},
            css: {
                mleavecolor: "#555555",
                mentercolor: "#3a3f4d"
            },
            urls: {
                reset: "/ballot/reset",
                del: "/ballot/del"
            }
        },
        methods: {
            checkInputs: function () {
                if (this.checkedJudge.length < 2) {
                    this.head = "选定的裁判数量不足.";
                    return false;
                }
                if (this.judgeLimit > this.list[this.list.length - 1].choices.length) {
                    this.head = "晋级名额太多了, 请减少一些.";
                    return false;
                }
                if (this.judgeLimit < 1) {
                    this.head = "晋级名额太少了, 请增加一些.";
                    return false;
                }
                if (this.judgeOption >= this.list[this.list.length - 1].choices.length) {
                    this.head = "裁判的选项可选数量太多了, 请减少一些.";
                    return false;
                }
                if (this.judgeOption < 1) {
                    this.head = "裁判的选项可选数量太少了, 请增加一些.";
                    return false;
                }
                return true;
            },
            nextTurn: function () {
                this.next = !this.next;
                if (this.showCheckbox)
                    this.head = '要开始新的一轮投票吗?';
                else
                    this.head = '根据记录, 这是<' + this.ballot + '>投票的一些细节.';
            },
            start: function () {
                if (!this.checkInputs()) return;
                this.axPost
                    .post("/turn/next", stringify({
                        "id": this.turnId,
                        "judge": judge2string(this.checkedJudge),
                        "limit": this.judgeLimit,
                        "option": this.judgeOption
                    }), {
                        headers: {'Content-Type': 'application/x-www-form-urlencoded',}
                    })
                    .then(resp => {
                        if (resp.data.status)
                            window.location.href = "prepare.html?id=" + this.turnId;
                        else {
                            if (resp.data.value === "underway")
                                this.head = "这个投票已经在进行中了.";
                            if (resp.data.value === "login") {
                                alert("请求错误, 请重新登录");
                                window.location.href = "index.html";
                            }
                        }
                    })
                    .catch(() => {
                        alert("请求错误, 请重新登录");
                        window.location.href = "index.html";
                    });
            },
            menter: function (obj) {
                obj.currentTarget.style.backgroundColor = this.css.mentercolor;
            },
            mleave: function (obj) {
                obj.currentTarget.style.backgroundColor = this.css.mleavecolor;
            },
            edit: function (url) {
                this.axPost
                    .post(url, stringify({id: this.turnId}))
                    .then(resp => {
                        if (resp.data.status === false) {
                            if (resp.data.value === "login") {
                                alert(this.css.loginAlert)
                                window.location.href = "index.html";
                                return;
                            }
                            this.head = this.css.unknownErr;
                        }
                        alert("操作成功!");
                        if(url === this.urls.del){
                            window.location.href = "workbench.html";
                            return;
                        }
                        location.reload();
                    })
                    .catch(() => {
                        alert("操作失败!");
                    })
            },
        },
        components: {
            turn: {
                template: '#turn',
                data: function (el) {
                    return {
                        order: el.$attrs.order
                    }
                }
            }
        },
        created: function () {
            this.turnId = getUrlParam("id");
            this.axGet = axios.create({
                url: window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
            this.axGet
                .get("/captcha/login", {
                    params: {}
                })
                .then(resp => {
                    if (resp.data.status === false) {
                        alert("请先登录")
                        window.location.href = "index.html";
                    }
                })
                .catch(() => {
                    window.location.href = "index.html";
                });

            this.axGet
                .get("/turn/prepare", {
                    params: {
                        id: this.turnId
                    }
                }).then(resp => {
                this.ballot = resp.data.value.name;
                this.head = "根据记录, 这是<" + resp.data.value.name + ">投票的一些细节.";
                this.list = resp.data.value.turn;
            }).catch(() => {
                this.head = "请求出错, 请检查网络."
            })
        },
        mounted: function () {}
    });
</script>
</body>
</html>
